<template>
    <div class="bz-sub-container">
        <div class="bz-control-bar">
            <div class="bz-control-element" v-for="(vv,k) in attr" :key="k">
                <div class="bz-title">{{ $case.paramCase(vv) }}:</div>
                <div class="bz-input">
                    <input type="number" v-model="bind[vv]">
                    <div class="bz-unit">
                        px
                    </div>
                </div>
            </div>
            <div class="bz-control-element">
                <div class="bz-title">color:</div>
                <div class="bz-input">
                    <input type="color" v-model="bind.color">
                </div>
                <div class="bz-input">
                    <input type="number" step="0.01" max="1" min="0" v-model="bind.opacity">
                </div>
            </div>
        </div>
        <div class="bz-show-area">
            <div class="bz-shadow-value">
                <pre v-highlightjs=""><code
                        class="css">box-shadow: h-shadow v-shadow blur spread color inset;</code></pre>
            </div>
            <div class="bz-shadow-demo" :style="dynamicStyle"></div>
            <div class="bz-code-img">
                <img src="../assets/images/box-shadow-diagram.png" alt="">
            </div>
        </div>
    </div>
</template>

<script>

    export default {
        name: "BoxShadow",
        data() {
            return {
                attr: ['hShadow', 'vShadow', 'blur', 'spread'],
                bind: {
                    hShadow: 0,
                    vShadow: 10,
                    blur: 30,
                    spread: 0,
                    color: '#000000',
                    opacity: 0.4,
                }
            }
        },
        computed: {
            dynamicStyle() {
                let opacity = Number(Math.floor(this.bind.opacity * 255)).toString(16);
                return `box-shadow: ${Math.floor(this.bind.hShadow)}px ${Math.floor(this.bind.vShadow)}px ${Math.floor(this.bind.blur)}px ${Math.floor(this.bind.spread)}px ${this.bind.color}${opacity}`;
            }
        }
    }
</script>

<style lang="less" scoped>
    @import "../assets/style/flex";
</style>